<template>
    <div id="apply-success">
        <!-- 成功申请 -->
        <div class="deposit-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-right="diffBack">
                        <div class="title"
                            slot="title">{{title}}</div>
                        <div slot="right" class="right">了解</div>
                    </van-nav-bar>
            </div>
            <div class="reset-wrapper">
                <div class="reset-content">
                  <div class="top-case">
                      <div class="img-case"><img src="@/assets/img/public/success.png" alt=""></div>
                      <div class="img-title">您已提交成功</div>
                      <div class="up-tips">请尽快向"<span>zhaopin@tuxiaozhu.com</span>"发送您的“个人简历+近期优秀作品”，邮件名称请注明为“姓名+电话+工作年限”。</div>
                  </div>
                  <div class="bottom-case">
                      <div class="btn-case">
                          <div class="left-btn">图小助官方邮箱</div>
                          <input type="text"
                                class="email-case"
                                value="zhaopin@tuxiaozhu.com"
                                id="order"
                                  @click="CopyNum('order')">
                          <div class="right-case" @click="CopyNum('order')">复制</div>
                      </div>
                      <div class="tips-case">平台会在3个工作日内审核并向您邀约面试</div>
                  </div>
                </div>
            </div>
      </div>
    </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      title: '申请入驻',
    }
  },
  created() {
  },
  methods: {
    diffBack() {
        this.$router.push('/designer/personalCenter')
    },
    CopyNum(inviteCode) {
      let num = document.querySelector(`#${inviteCode}`);
      num.select(); // 选择对象
      document.execCommand("Copy");
      this.$toast('复制成功')
    },
  }
};
</script>
<style lang="scss" scoped>
#apply-success {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    .deposit-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
                .right{
                    font-size: 0.32rem;
                    height: 0.92rem;
                    line-height: 1rem;
                }
            }
        }
        .reset-wrapper{
            position: fixed;
            width: calc(100% - 0.48rem);
            height: calc(100% - 1.4rem);
            margin: 0.24rem;
            box-sizing: border-box;
            top: 0.92rem;
            left: 0;
            right: 0;
            overflow-y: scroll;
            bottom: 0;
            background: #fff;
            .reset-content{
                width: 100%;
                // height: 100%;
                .top-case{
                    margin: 0 auto;
                    margin-top: 1rem;
                    .img-case{
                        width: 1.86rem;
                        height: 1.86rem;
                        margin: 0 auto;
                        img{
                            width: 1.86rem;
                            height: 1.86rem; 
                        }
                    }
                    .img-title{
                        width: 100%;
                        margin-top: 0.5rem;
                        text-align: center;
                        color: #282828;
                        font-size: 0.3rem;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        line-height: 0.42rem;
                    }
                    .up-tips{
                        box-sizing: border-box;
                        width: 100%;
                        color: #656565;
                        margin-top: 0.2rem;
                        padding: 0 0.68rem;
                        font-size: 0.24rem;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        span{
                            color: #5E8EFE;
                        }
                    }
                }
                .bottom-case{
                    width: 100%;
                    margin-top: 4.5rem;
                    .btn-case{
                        position: relative;
                        margin: 0 0.53rem;
                        width: calc(100% - 1.06rem);
                        height: 0.91rem;
                        line-height: 0.91rem;
                        background: #F2F6FC;
                        padding: 0 0.33rem;
                        box-sizing: border-box;
                        display: flex;
                        div{
                            display: inline-block;
                        }
                        .left-btn{
                        }
                        .email-case{
                            flex: 1;
                            text-align: center;
                            color: #5E8EFE;
                            border: none;
                            background: transparent;
                        }
                        .right-case{
                            float: right;
                        }
                    }
                    .tips-case{
                        text-align: center;
                        color: #9B9EA5;
                        font-size: 0.24rem;
                        font-family: PingFangSC-Regular;
                        font-weight: 400;
                        margin: 0.46rem 0
                    }
                }
            }
        }
    }
}
</style>
